<template>
  <div class="limited-row">
    <!-- 左侧内容 -->
    <div class="left-content">
      <h1 class="page-title">{{ item.title || "任务详情" }}</h1>
      <!-- 任务描述信息 -->
      <el-descriptions
        labelClassName="descriptions-label-class"
        content-class-name="descriptions-content-class"
        :column="4" border direction="vertical">
        <el-descriptions-item label="负责人">
          <user-and-avatar :user-id="item.assignee"></user-and-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <dict-tag :options="dict.type.work_status" :value="item.status"/>
        </el-descriptions-item>
        <el-descriptions-item label="优先级">
          <dict-tag :options="dict.type.priority" :value="item.priority"/>
        </el-descriptions-item>
        <el-descriptions-item label="类型">
          <dict-tag :options="dict.type.work_type" :value="item.type"/>
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ item.startDate }}</el-descriptions-item>
        <el-descriptions-item label="截至时间">{{ item.dueDate }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ item.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ item.updatedAt }}</el-descriptions-item>
      </el-descriptions>

      <!-- 菜单 -->
      <div class="menu">
        <el-menu
          default-active="1"
          active-text-color="#409EFF"
          background-color="#fff"
          mode="horizontal"
          text-color="#666"
          @select="(key) => (activeIndex = key)"
        >
          <el-menu-item index="1">描述</el-menu-item>
          <el-menu-item index="2">子工作项</el-menu-item>
          <el-menu-item index="3">测试</el-menu-item>
          <el-menu-item index="4">缺陷</el-menu-item>
          <el-menu-item index="5">工作项附件</el-menu-item>
        </el-menu>
      </div>
      <!-- 动态内容展示 -->
      <div class="content-box">
        <div v-show="activeIndex === '1'">
          <div class="content-text" v-html="item.description"></div>
        </div>
        <div v-show="activeIndex === '2'">
          <el-table :data="childItem">
            <el-table-column label="编号" prop="workItemId"></el-table-column>
            <el-table-column label="标题" prop="title"></el-table-column>
            <el-table-column label="状态" prop="status"></el-table-column>
            <el-table-column label="指派人" prop="assignee">
              <template #default="{ row }">
                <user-and-avatar :user-id="row.assignee"></user-and-avatar>
              </template>
            </el-table-column>
            <el-table-column label="故事点数" prop="storyPoints"></el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '3'">
          <el-table :data="tests">
            <el-table-column label="标题" align="center" prop="title"/>
            <el-table-column label="结果" align="center" prop="outcome">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.test_outcome" :value="scope.row.outcome"/>
              </template>
            </el-table-column>
            <el-table-column label="优先级" align="center" prop="priority">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.test_priority" :value="scope.row.priority"/>
              </template>
            </el-table-column>
            <el-table-column label="测试状态" align="center" prop="status">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.test_status" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column label="执行人ID" align="center" prop="executorId">
              <template slot-scope="scope">
                <user-and-avatar :user-id="scope.row.executorId"></user-and-avatar>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createdAt">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人ID" align="center" prop="createdBy">
              <template slot-scope="scope">
                <user-and-avatar :user-id="scope.row.createdBy"></user-and-avatar>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '4'">
          <el-table :data="flaws">
            <el-table-column label="标题" align="center" prop="title"/>
            <el-table-column label="负责人" align="center" prop="responsibleId">
              <template slot-scope="scope">
                <user-and-avatar :user-id="scope.row.responsibleId"></user-and-avatar>
              </template>
            </el-table-column>
            <el-table-column label="严重程度" align="center" prop="severity">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.order_of_severity" :value="scope.row.severity"/>
              </template>
            </el-table-column>
            <el-table-column label="缺陷类型" align="center" prop="defectClass">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.defect_class" :value="scope.row.defectClass"/>
              </template>
            </el-table-column>
            <el-table-column label="重现概率" align="center" prop="recurrenceProbability">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.recurrence_probability" :value="scope.row.recurrenceProbability"/>
              </template>
            </el-table-column>
            <el-table-column label="原因分析" align="center" prop="causeAnalysis">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.cause_analysis" :value="scope.row.causeAnalysis"/>
              </template>
            </el-table-column>
            <el-table-column label="解决方案" align="center" prop="solution">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.solution" :value="scope.row.solution"/>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createdAt">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="createdBy">
              <template slot-scope="scope">
                <user-and-avatar :user-id="scope.row.responsibleId"></user-and-avatar>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '5'">
          <el-table :data="fileList" @row-click="(row)=>{showFile=true;file=row}">
            <el-table-column label="标题" align="center" prop="title"/>
<!--            <el-table-column label="附件审核状态" align="center" prop="reviewStatus"/>-->
            <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="createdBy">
              <template v-slot:default="scope">
                <span><user-and-avatar :userId="scope.row.createdBy"></user-and-avatar></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="right-content">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" title="属性">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="风险">
              <dict-tag :options="dict.type.work_risk" :value="item.risk"/>
            </el-descriptions-item>
            <el-descriptions-item label="业务价值">{{ item.businessValue }}</el-descriptions-item>
            <el-descriptions-item label="故事点数">{{ item.storyPoints }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="2" title="变更">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="版本号">{{ item.version }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="3" title="迭代">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="所属迭代">{{ thisSprint.name }}</el-descriptions-item>
            <el-descriptions-item label="迭代状态">
              <dict-tag :options="dict.type.sprint_status" :value="thisSprint.status"/>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="3" title="发布">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="所属发布">{{ thisRelease.title }}</el-descriptions-item>
            <el-descriptions-item label="发布阶段">
              <dict-tag :options="dict.type.release_status" :value="thisRelease.status"/>
              {{ thisRelease.status }}
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="4" title="开发">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="子任务总数">{{ item.childCount }}</el-descriptions-item>
            <el-descriptions-item label="已完成子任务数">{{ item.childCompletedCount }}</el-descriptions-item>
            <el-descriptions-item label="进度">

              <el-progress :percentage="(Math.min(item.childCompletedCount/item.childCount,1)*100).toFixed(0)*1.0||0"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="5" title="工时">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="预估工时">{{ item.estimatedWorkingHours }}</el-descriptions-item>
            <el-descriptions-item label="登记工时">{{ item.registerWorkingHours }}</el-descriptions-item>
            <el-descriptions-item label="剩余工时">
              {{ Math.max(item.estimatedWorkingHours - item.registerWorkingHours, 0) }}
            </el-descriptions-item>
            <el-descriptions-item label="工时进度">
              <el-progress
                :percentage="(Math.min(item.registerWorkingHours/item.estimatedWorkingHours,1)*100).toFixed(0)*1.0||0"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="6" title="基础信息">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="更新人">
              <user-and-avatar :userId="item.updatedBy"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ item.updatedAt }}</el-descriptions-item>
            <el-descriptions-item label="创建人">
              <user-and-avatar :userId="item.createdBy"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ item.createdAt }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog
      :visible.sync="showFile"
      title="附件详情"
      width="1400px"
      append-to-body>
      <div>
        <h3>{{ file.title }}</h3>
      </div>
      <FileShow :url="file.fileUrl"></FileShow>
    </el-dialog>
  </div>
</template>
<script>
import {getWorkAllInit} from "@/api/projectUser/userWork";
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import {listAllSprint} from "@/api/projectUser/userSprint";
import {listAllRelease} from "@/api/projectUser/userRelease";
import FileShow from "@/components/FileShow/index.vue";

export default {
  name: "workItem",
  components: {FileShow, UserAndAvatar},
  dicts: [
    'work_status',      // 工作状态
    'priority',         // 优先级
    'work_type',        // 工作类型
    'test_outcome',     // 测试结果
    'test_priority',    // 测试优先级
    'test_status',      // 测试状态
    'order_of_severity', // 严重程度
    'defect_class',     // 缺陷类型
    'recurrence_probability', // 重现概率
    'cause_analysis',   // 原因分析
    'solution',        // 解决方案
    'work_risk',        // 工作风险
    'sprint_status',    // 迭代状态
    'release_status'    // 发布状态
  ],
  data() {
    return {
      tests: [],
      flaws: [],
      showFile: false,
      file: {},
      sprints: [],
      releases: [],
      activeIndex: '1',
      activeNames: ['1', '2', '3', '4', '5', '6'], // 默认展开所有折叠项
      item: {},
      childItem: [],
      dependOn: [
        {id: 'A01', title: '依赖任务1', status: '已完成', owner: '王五', relation: '前置'},
        {id: 'A02', title: '依赖任务2', status: '待完成', owner: '赵六', relation: '后置'},
      ],
      fileList: [],
    };
  },
  computed: {
    thisSprint() {
      return this.sprints.find(sprint => sprint.sprintId === this.item.sprintId) || {}
    },
    thisRelease() {
      return this.releases.find(release => release.releaseId === this.item.releaseId) || {}
    }
  },
  props: {
    workId: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    workId: {
      handler(newVal, oldVal) {
        this.workId = newVal;
        this.getData()
      },
      immediate: true
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getWorkAllInit(this.workId).then(({data}) => {
        this.item = data.work;
        this.fileList = data.workAttachments;
        this.childItem = data.childWorks;
        this.tests = data.tests;
        this.flaws = data.flaws;
        listAllSprint(this.item.projectId).then(({data}) => {
          this.sprints = data
        });
        listAllRelease(this.item.projectId).then(({data}) => {
          this.releases = data
        })
      })
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
